body {
    margin: 0px;
    padding: 0px;
}
p, div, span, li,h1,h2 {
    font-family: Lucida Grande, Helvetica, Sans-serif;
    font-size: small;
}

h1 {
    font-family: Baskerville;
    font-size: 22px;
    font-weight: bold;
    margin: 10px 0px 0px 10px;
}

h2 {
    font-family: Baskerville;
    font-size: 16px;
    font-weight: normal;
    font-style: italic;
    margin: 0px 0px 20px 10px;
}

div.instance {
    background: #E2FACF;
    border-bottom: 1px dotted #91C674;
    margin-left: 44px;
    padding: 2px;
}

div.template {
    background: #D2F6BF;
    border-bottom: 1px dotted #91C674;
    padding: 2px;
}

div.template span.id {
    display: inline-block;
    width: 40px;
    text-align: right;
    color: #91C674;
    cursor: pointer;

}


div.template input[type='text'] {
    border: none;
    background: #E2FACF;
    width: 320px;   
}

div.template input[type='text'].name {
    margin-top: -1px;
    margin-bottom: -1px;
    vertical-align: top;
    height: 24px;
    
}



div.template input.delete {
    border: 1px dotted #91C674;
    color: #91C674;
    background: none;
    margin-left: 10px;
    margin-right: 10px;
    width: 60px;
    -moz-border-radius: 6px;
  	-webkit-border-radius:6px;
}

div.template input.delete:hover {
    border: 1px dotted #7d0500;
    color: #7d0500;
    background-color: #ceaea4;
    cursor: pointer;
}

div.template input.update {
    border: 1px dotted #91C674;
    color: #91C674;
    background: none;
    margin-left: 40px;
    width: 80px;
    -moz-border-radius: 6px;
  	-webkit-border-radius:6px;
}

div.template input.update:hover {
    color: black;
    background-color: #E2FACF;
    cursor: pointer;

}


div.template input.add {
    border: 1px dotted #91C674;
    color: #91C674;
    background: #E2FACF;
    margin-left: 40px;
    width: 120px;
    -moz-border-radius: 6px;
  	-webkit-border-radius:6px;
    margin-top: -5px;
}

div.template input.add:hover {
    color: black;
    background-color: #E2FACF;
    cursor: pointer;
}


div.instance input.teacher {
    width: 160px;
}
div.instance input.key {
    width: 80px;
}

div.template input[type='text']:hover {
    background-color: white;
}

div.template select {
    border: none;
    background: none;
}


ul.selectquery {
  	list-style: none;
  	margin: 0px auto 0px auto;
  	width: 840px;
  	display: block;
}

ul.selectquery li {
    text-align: center;
    display: inline-block;
    border: 1px dotted #91C674;
    color: #91C674;
    background: #E2FACF;
    width: 120px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
  	-webkit-border-radius-topleft:6px;
  	-webkit-border-radius-topright:6px;
  	border-bottom: 0px;
  	list-style: none;
    vertical-align: middle;
    cursor: pointer;
    padding: 4px
}

ul.selectquery li:hover {
    color: white;
    background-color: #91C674;
    cursor: pointer;
}

#data {
    margin: 0px auto 10px auto;;
    border: 3px solid #91C674;
    width: 820px;
    overflow: visible;
}

#data p {
    padding: 10px;
    font-family: Baskerville;
    font-size: 16px;
    font-style: italic;
}

#login {
    width: 670px;
    height: 420px;
  	background: url(../bin/loginscreen.png) top left no-repeat;
    margin: auto;

    padding: 15px;
    margin: 30px auto 30px auto;
    padding-top: 230px;
}
#login form {
    margin: auto;
    color: #666;
    text-align: center;
}

#login input {
    border: 1px solid #333;
    background: url(../bin/barbg-dark.png) top left repeat-x black;
    -moz-border-radius: 6px;
  	-webkit-border-radius:6px;
  	height: 20px;
  	margin-bottom: 16px;
  	margin-right: 80px;
  	width: 160px;
  	padding: 2px;
  	font-size: 14px;
}

#login input:hover{
    border: 1px solid #000;
}

#login p {
    text-align: center;
    font-family: Baskerville;
    color: red;
    font-style: italic;
    font-size: 16px;
}

#login input[type='submit'] {
    background: url(../bin/barbg.png) top left repeat-x black;
    color: black;
   	height: 27px;
    margin-bottom: 2px;
 }

#login label {
    display: inline-block;
    width: 80px;
}
